<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  [nzVisible]="visible"
  nzPlacement="right"
  [nzTitle]="title"
  [nzWidth]="500"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="form" (ngSubmit)="doSubmit()" nzLayout="vertical">
      <!-- name -->
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.name">Name</nz-form-label>
        <nz-form-control nzHasFeedback nzValidatingTip="Validating..." i18n-nzValidatingTip="@@common.validating" [nzErrorTip]="errorTpl">
          <input nz-input formControlName="name" placeholder="Name" i18n-placeholder="@@common.name"/>
        </nz-form-control>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="control.hasError('required')" i18n="@@integrations.access-token.access-token-drawer.name-cannot-be-empty">Access token name cannot be empty</ng-container>
          <ng-container *ngIf="control.hasError('duplicated')" i18n="@@integrations.access-token.access-token-drawer.name-unavailable">This access token name is not available</ng-container>
        </ng-template>
      </nz-form-item>

      <!-- type -->
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.type">Type</nz-form-label>
        <nz-form-control>
          <nz-select
            class="nz-select-40"
            [nzDisabled]="isEditing"
            formControlName="type">
            <ng-container *ngFor="let at of actionTokenTypes">
              <nz-option
                [nzValue]="at"
                [nzLabel]="at | accessTokenType">
              </nz-option>
            </ng-container>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
    <!-- Permissions -->
    <div *ngIf="isServiceAccessToken" class="permissions">
      <nz-form-label nzNoColon nzRequired i18n="@@common.permissions">Permissions</nz-form-label>
      <nz-collapse nzExpandIconPosition="right">
        <nz-collapse-panel
          class="resource-type"
          *ngFor="let rt of authorizedResourceTypes; let first=first;"
          [nzHeader]="rt.displayName"
          [nzActive]="first"
        >
          <div class="permissions">
            <label *ngIf="!isEditing"
                   nz-checkbox
                   [(ngModel)]="permissions[rt.type].allChecked"
                   (ngModelChange)="updatePermissionsAllChecked(permissions[rt.type])"
                   [nzIndeterminate]="permissions[rt.type].indeterminate"
                   i18n="@@common.all"
            >All</label>
            <div *ngFor="let permission of permissions[rt.type].statements" class="permission">
              <div class="permission-header">
                <label *ngIf="isEditing">{{permission.action.displayName}} ({{permission.action.name}})</label>
                <label *ngIf="!isEditing" nz-checkbox [(ngModel)]="permission.checked" (ngModelChange)="updatePermissionSingleChecked(permissions[rt.type])">{{permission.action.displayName}} ({{permission.action.name}})</label>
                <i nz-icon [nz-tooltip]="permission.action.description" nzType="icons:icon-info-outline"></i>
              </div>

              <div class="permission-resources">
                <div *ngFor="let resource of permission['resources']" class="permission-resource">
                  {{resource}}
                </div>
              </div>
            </div>
          </div>
        </nz-collapse-panel>
      </nz-collapse>
    </div>
    <button *ngIf="!readonly" (click)="doSubmit()" nz-button class="submit-btn" [nzType]="'primary'" [nzLoading]="isLoading" i18n="@@common.save">Save</button>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

<nz-modal
  [(nzVisible)]="isCreationConfirmModalVisible"
  i18n-nzTitle="@@integrations.access-tokens.access-token-created"
  nzTitle="Access token created"
  (nzOnCancel)="isCreationConfirmModalVisible = false"
  [nzFooter]="confirmFooter"
  (nzOnOk)="isCreationConfirmModalVisible = false">
  <ng-container *nzModalContent>
    <div class="">
      <nz-alert
        nzType="warning"
        i18n-nzDescription="@@integrations.access-token.copy-token-warning"
        nzDescription="Copy and save this token now, the token value will be masked once you leave the page."
        nzShowIcon
        nzIconType="icons:icon-warning"
      ></nz-alert>

      <div class="token-wrapper">
        <div class="token-name">{{tokenName}}:</div>
        <div>
          <span>{{tokenValue}}</span>
          <i (click)="copyText($event, tokenValue)" class="copy-icon" nz-icon nzType="icons:icon-copy"></i>
        </div>
      </div>
    </div>
  </ng-container>
  <ng-template #confirmFooter>
    <button id="confirm-modal-ok" nz-button nzType="primary" (click)="isCreationConfirmModalVisible = false" i18n="@@common.ok">Ok</button>
  </ng-template>
</nz-modal>

